<template>
  <div id="treeyq" class="echart-test"></div>


</template>

<script>
  import echarts from 'echarts'
  import {mapGetters} from 'vuex';
  export default {
    name: "TemperatureChart",
    computed: {
      ...mapGetters(['ScreenWidth'])
    },
    props:['pointsArr'],
    data() {
      return {
        echartsA: null
      }
    },
    watch: {
      'ScreenWidth': function (newVal) {
        this.echartsA.resize();
      },
      'pointsArr': function (newVal) {
        //包盖进水开到为
        let bgjskdw=newVal.氧枪进水阀开到位;
        //包盖进出水到为
        let bgcskdw=newVal.氧枪出水阀开到位;
        let bgjsname='';
        let bgcsname='';
        let bgjsbjimg='';
        let bgcsbjimg='';
        let bgjsimg='http://qiniu.yuxinjishu.com/tou.png';
        let bgjsw=30;
        let bgjsh=30;
        let bgcsimg='http://qiniu.yuxinjishu.com/tou.png';
        let bgcsw=30;
        let bgcsh=30;
        let bgjscolor='';
        let bgcscolor='';
        let bgX='1018';
        if(bgjskdw=='0'){
          bgjsname='氧枪进水关';
          bgjsimg='http://qiniu.yuxinjishu.com/GUAN.png';
          bgjscolor='#fb2525';
          bgjsw=50;
          bgjsh=80;
          bgX='1025';
        }else if(bgjskdw=='1'){
          bgjsname='氧枪进水开';
          bgjsimg='http://qiniu.yuxinjishu.com/KAI.png';
          bgjscolor='#91ffc7';
          bgjsw=50;
          bgjsh=80;
          bgX='1025';
        }
        if(bgcskdw=='0'){
          bgcsname='氧枪出水关';
          bgcsimg='http://qiniu.yuxinjishu.com/GUAN.png';
          bgcscolor='#fb2525';
          bgcsw=50;
          bgcsh=80;
          bgX='1025';
        }else if(bgcskdw=='1'){
          bgcsname='氧枪出水开';
          bgcsimg='http://qiniu.yuxinjishu.com/KAI.png';
          bgcscolor='#91ffc7';
          bgcsw=50;
          bgcsh=80;
          bgX='1025';

        }



        //包盖进水开关故障
        let bgjskggz=newVal.氧枪进水快切阀开关故障;
        //包盖进出开关故障
        let bgcskggz=newVal.氧枪出水快切阀开关故障;

        if(bgjskggz=='1'){
          bgjsbjimg='http://qiniu.yuxinjishu.com/红色报警.png';
        }else if(bgjskggz=='0'){
          bgcsbjimg='http://qiniu.yuxinjishu.com/绿色.png';
        }
        if(bgcskggz=='1'){
          bgcsbjimg='http://qiniu.yuxinjishu.com/红色报警.png';
        }else if(bgcskggz=='0'){
          bgjsbjimg='http://qiniu.yuxinjishu.com/绿色.png';
        }



        //包盖上限位
        let bgsxw=newVal.氧枪上限位;
        //包盖下限位
        let bgxxw=newVal.氧枪下限位;
        //包盖位置
        let bgwzx='';
        let bgwzy='';
        let bggz=0;
        //上限位为绿时
        if(bgsxw==1&&bgxxw==0){
          bgwzx='400';
          bgwzy='330';
          bggz=345;
          //下限位为绿时
        }else if(bgsxw==0&&bgxxw==1){
          bgwzx='400';
          bgwzy='266';
          bggz=281
          //两个都为红时
        }else if(bgsxw==0&&bgxxw==0){
          bgwzx='400';
          bgwzy='293';
          bggz=308;
        }
        let newValA=[bgjsname,bgcsname,bgsxw,bgxxw,bgwzx,bgwzy,bggz,bgjskggz,bgcskggz,bgjsbjimg,bgcsbjimg,bgjsimg,bgcsimg,bgjscolor,bgcscolor,bgjsw,bgjsh,bgcsw,bgcsh,bgX];
        this.setOption(newValA);
      }
    },
    mounted() {
      window.onresize = () => {
        this.$store.dispatch('plc/setScreenWidth',document.body.clientWidth );//调取方法
      };
      this.echartsA = echarts.init(document.getElementById('treeyq'));
      this.getData();

    },
    methods: {
      getData(dd) {
        let data = dd || [0];
        this.setOption(data);
      },
      setOption(data) {
        let nodes = [
          {
            x: '400',
            y: '80',
            nodeName: '',//包盖
            img: 'http://qiniu.yuxinjishu.com/铁包.png',
            sizenodeW:200,
            sizenodeH:230,
            posnode:'bottom',
            shownode:false,
            color:'#91ffc7'
          },
          {
            x: data[4],
            y: data[5],
            nodeName: '',//包盖
            img: 'http://qiniu.yuxinjishu.com/加盖.png',
            sizenodeW:200,
            sizenodeH:20,
            posnode:'bottom',
            shownode:false,
            color:'#91ffc7',
          },
          {
            x: '445',
            y: '990',
            nodeName: '',//连接口
            img: 'http://qiniu.yuxinjishu.com/L型管.png',
            sizenodeW:50,
            sizenodeH:50,
            posnode:'bottom',
            color:'#91ffc7',
            shownode:false
          },
          {
            x: '449',
            y: '800',
            nodeName: '',//连接口
            img: 'http://qiniu.yuxinjishu.com/T型管.png',
            sizenodeW:58,
            sizenodeH:58,
            posnode:'bottom',
            color:'#91ffc7',
            shownode:false
          },
          {
            x: data[19],
            y: '1000',
            nodeName: data[1],
            img: data[12],
            sizenodeW:data[15],
            sizenodeH:data[16],
            color:data[14],
            posnode:'right',
            shownode:true
          },
          {
            x: '850',
            y: '1060',
            nodeName: '出水快切阀开关',//包盖报警
            a:data[8],
            img: data[10],
            sizenodeW:50,
            sizenodeH:50,
            posnode:'right',
            color:'#91ffc7',
            shownode:true
          },

          {
            x: '850',
            y: '860',
            nodeName: '进水快切阀开关',//包盖报警
            d:data[7],
            img: data[9],
            sizenodeW:50,
            sizenodeH:50,
            posnode:'right',
            color:'#91ffc7',
            shownode:true
          },
          {
            x: '380',
            y: '550',
            nodeName: '',//包盖上限位
            c:data[2],
            img: 'http://qiniu.yuxinjishu.com/字体-1 拷贝 3.png',
            sizenodeW:90,
            sizenodeH:50,
            color:'#91ffc7',
            posnode:'right',
            shownode:false
          },
          {
            x: '380',
            y: '450',
            nodeName: '',//包盖下限位
            b:data[3],
            img: 'http://qiniu.yuxinjishu.com/字体-1 拷贝 2.png',
            sizenodeW:90,
            sizenodeH:50,
            color:'#91ffc7',
            posnode:'right',
            shownode:false
          },

          {
            x: data[19],
            y: '800',
            nodeName: data[0],
            img: data[11],
            sizenodeW:data[17],
            sizenodeH:data[18],
            posnode:'right',
            color:data[13],
            shownode:true
          }
        ]
        let lines= [{
          color:'#c0c0c0',
          width:25,
          remark: '包盖出水竖',
          aaaaa:1,
          bbbbb:0,
          coords: [

            [440, 780],
            [440, 345]

          ]
        },{
          color:'#c0c0c0',
          width:25,
          remark: '包盖出水竖',
          aaaaa:1,
          bbbbb:0,
          coords: [
            [440, data[6]],
            [440, 985]

          ]
        },{
          color:'#c0c0c0',
          width:25,
          remark: '包盖出水',
          aaaaa:0,
          bbbbb:1,
          coords: [
            [448.5, 1000],
            [1020, 1000]

          ]
        },{
          color:'#c0c0c0',
          width:25,
          remark: '包盖进水',
          aaaaa:0,
          bbbbb:1,
          coords: [

            [1020, 800],
            [448.5, 800]

          ]
        }
        ]
        let charts = {
          nodes: [],
        }
        let seriesDate=[

        ]

        for (var j = 0; j < nodes.length; j++) {
          var x = parseInt(nodes[j].x)
          var y = parseInt(nodes[j].y)
          var sizenodeA=[nodes[j].sizenodeW,nodes[j].sizenodeH];
          var showdata=nodes[j].shownode;
          var posdata=nodes[j].posnode;
          var a=nodes[j].a;
          var b=nodes[j].b;
          var c=nodes[j].c;
          var d=nodes[j].d;
          var imgdats=nodes[j].img;
          var color=nodes[j].color;
          //判断图片
         /* if(a==1){
            imgdats='http://qiniu.yuxinjishu.com/阀门-2.png';
            color='#ff8e87';
          }
          if(d==1){
            imgdats='http://qiniu.yuxinjishu.com/阀门-2.png'
            color='#ff8e87';
          }*/
          if(b==1){
            imgdats='http://qiniu.yuxinjishu.com/字体-1.png'
          }
          if(c==1){
            imgdats='http://qiniu.yuxinjishu.com/字体-1 拷贝.png'
          }
          var node = {
            nodeName: nodes[j].nodeName,
            value: [x, y],
            symbolSize: sizenodeA,
            alarm: nodes[j].alarm,
            symbol: 'image://'+ imgdats,
            itemStyle: {
              normal: {
                color: '#ff6b43',
              }
            }
          }
          var nodesdata={
            type: 'graph',
            hoverAnimation:false,
            coordinateSystem: 'cartesian2d',
            label: {
              normal: {
                show: showdata,
                position: posdata,
                color: color,
                fontSize:16,
                fontWeight: 'bolder',
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: function(item) {
                    return item.data.nodeName
                  }
                }
              }
            },
            data: [node],
          }
          seriesDate.push(nodesdata)
        }
        for (var i = 0; i < lines.length; i++) {
          var remark=lines[i].remark;
          var coords=lines[i].coords;
          var lineWidth=lines[i].width;
          var linecolor=lines[i].color;
          var aaa=lines[i].aaaaa;
          var bbb=lines[i].bbbbb;

          var linesALL = {
            type: 'lines',
            polyline: true,
            coordinateSystem: 'cartesian2d',
            lineStyle: {
              normal: {
                width: lineWidth,
                color: new echarts.graphic.LinearGradient(
                  aaa, 0, 0, bbb,
                  [
                    {offset: 0, color: '#5f5858'},
                    {offset: 0.3, color: '#fff'},
                    {offset: 0.5, color: '#fff'},
                    {offset: 1, color: '#5f5858'}
                  ]
                ),

                type: 'solid',
                opacity:1
              }
            },
            effect: {
              show: true,
              trailLength: 0.1,
              symbol: 'arrow',
              color: '#0eb7da',
              symbolSize: 15
            },
            data:[
              {
                remark:remark,
                coords:coords
              }

            ]
          }
          seriesDate.push(linesALL);
        }
        let option = {
          /*backgroundColor: "#0B1321",*/
          xAxis: {
            min: 0,
            max: 1000,
            show: false,
            type: 'value'
          },
          yAxis: {
            min: 0,
            max: 1000,
            show: false,
            type: 'value'
          },
          series:seriesDate
        };
        this.echartsA.setOption(option);
      /*  this.echartsA.getZr().on('click', function (params) {
          var pointInPixel= [params.offsetX, params.offsetY];
        });*/




      }
    }
  }

</script>

<style lang="scss" scoped>
  .echart-test {
    height: 780px;
    font-size: 16px;
    border-radius: 5px;

  }

</style>
